<script>
	import Pile from "@/components/common/Pile.vue"
	import Lot from "@/components/common/Lot.vue"
	import Station from "@/components/common/Station.vue"
	import Menu from "@/components/layout/Menu.vue"
	import my from "@/pages/my/my.vue"
	export default {
		components: {
			Pile,
			Lot,
			Station,
			Menu,
			my
		},
		computed: {
			basicData() {
				return this.$store.state.basicData
			}
		},
		data() {
			return {
				loading:false,
				tabIndex: 0,
				title: 'Hell2o',
				messageList: [],
				messageIndex: -1,
				currentType: 1,
				myCollectList: [],
				find_station:"",
				
				marqueeText: '这是第一行文本，这是第二行文本，这是第三行文本。' // 多行文本拼接为单行展示效果更佳。

			}
		},
		onLoad(options) {
			this.getMessageList()
			this.getMyCollect()
			uni.request({
				url: 'https://app.yinuoxinnengyuan.cn/api/index/index',
				success: (r) => {
					if(r.data==1){
						if(uni.getStorageSync("id")==''){
							setTimeout(function(){
								uni.redirectTo({
									url:'/pages/start/splash'
								})
							},2000)
						}else{
							if(options.tabIndex==1){
								this.tabIndex = 1
							}
							if(options.No){
								var no = options.No
								setTimeout(function(){
									uni.navigateTo({
										url:'/pages/detail/pileDetail?no='+no+"&lot=0"
									})
								},1000)
								
							}
						}
					}else{
						if(options.tabIndex==1){
							this.tabIndex = 1
						}
						if(options.No){
							var no = options.No
							setTimeout(function(){
								uni.navigateTo({
									url:'/pages/detail/pileDetail?no='+no+"&lot=0"
								})
							},1000)
							
						}
					}
				}
			})
			
			
		},
		onShow() {
			this.loading = false
			this.getMessageList()
			this.getMyCollect()
			this.getInfo()
		},
		methods: {
			xieyi(id){
				uni.navigateTo({
					url:'/pages/my/privacy?id='+id+"&type=message"
				})
			},
			async getInfo() {
				const res = await this.http("get", "/api/master/my_station")
				this.find_station = res.data
			},
			async getMessageList() {
				const res = await this.http("get", "/api/index/message_list")
				this.messageList = res.data;
			},
			async getMyCollect() {
				const res = await this.http("get", "/api/user/my_collect", {
					type: this.currentType // 1桩 2停车位
				})
				this.myCollectList = res.data;
				this.loading=true
			},

			go(url) {
				uni.navigateTo({
					url
				})
			},
			scanCode() {
			  uni.scanCode({
				success: (res) => {
				  console.log('扫描结果：', res.result);
				  if(res.result){
					  var arr = res.result.split("No=")
					  if(arr){
						  var no = arr[1]
						  uni.navigateTo({
						  	url:'/pages/detail/pileDetail?no='+no+"&lot=0"
						  })
					  }
				  }
				  // 根据扫码结果进行相应的处理
				},
				fail: (err) => {
				  console.error('扫码失败:', err);
				}
			  });
			},
			youhui(){
				uni.navigateTo({
					url:'/pages/my/privacy?type=youhui'
				})
			},
			activity(){
				uni.navigateTo({
					url:'/pages/my/privacy?type=activity'
				})
			},
			add(){
				if(uni.getStorageSync("id")==''){
					this.toast('请先登录')
					
					setTimeout(function(){
						uni.redirectTo({
							url:'/pages/start/splash'
						})
					},2000)
				}else{
					uni.navigateTo({
						url:'/pages/my/addPile'
					})
				}
			},
			vip(){
				uni.navigateTo({
					url:'/pages/my/privacy?type=vip'
				})
			}
			  
		}
	}
</script>


<template>
	<view class="content p-20">
		<div v-show="tabIndex==0" v-if="loading==true">
			<div class="flex pt-10 pb-40 pl-10" style="gap:20px;overflow: auto; ">
				<div @click="youhui" class="shadow flex-shirnk-0 center h-180 rounded-16 fz50 font-bold text-orange index-1"
					style="width: 280rpx;">
					优惠
				</div>
				<div v-if="find_station&&find_station.type!=4" @click="add" class="shadow flex-col flex-shirnk-0 center h-180 rounded-16 fz50 font-bold text-orange index-2"
					style="width: 280rpx;">
					<div>新增</div>
					<div>电桩</div>
				</div>
				<div @click="vip" class="shadow flex-col flex-shirnk-0 center h-180 rounded-16 fz50 font-bold text-orange index-4"
					style="width: 280rpx;">
					<div>会员</div>
					<div>奖励</div>
				</div>
				<div  @click="activity" class="shadow flex-shirnk-0 center h-180 rounded-16 flex-col fz50 font-bold text-orange index-3"
					style="width: 280rpx;margin-right: 10px;">
					<div>电车降</div>
					<div>价活动</div>
				</div>
			</div>

			<div class="mt-20 fz32 mb-10">
				常用菜单
			</div>

			<Menu />

			<div class="mt-20 fz32 mb-10">
				消息盒子
			</div>
			<div class="menu text-orange shadow p-20 rounded-16 container" >
				
				<view class="marquee">
					<div v-for="(item,index) in messageList" :key="index" @click="xieyi(item.id)">
						<div class="ellipsis mt-5 mb-10" @click="messageIndex=index">
							{{item.title}}
						</div>
						<!-- <div v-html="item.content" v-if="messageIndex==index" class="mb-20 fz24 text-gray-600"
							style="word-break: break-all;">
						</div> -->
					</div>
				</view>
				
				
				
			</div>

			<div class="mt-20 fz32 mb-10">
				我的收藏
			</div>

			<div class="tab shadow between rounded-16 mt-20 mb-20">
				<div class="flex-1 center h-80 text-gray-900" :class="{'text-orange font-bold':currentType==1}"
					@click="currentType=1;getMyCollect()">电桩</div>
				<div style="width: 4rpx;height: 40rpx;background-color: #d8d8d8;"></div>
				<div class="flex-1 center h-80 text-gray-900" :class="{'text-orange font-bold':currentType==2}"
					@click="currentType=2;getMyCollect()">车位</div>
			</div>


			<template v-for="item in myCollectList">
				<Pile :item="item" v-if="currentType==1"/>
				<Lot :item="item" v-if="currentType==2"/>
			</template>
			<Nomore v-if="!myCollectList||myCollectList.length==0"></Nomore>

		</div>
		<!-- <Lot /> -->

		<!-- <Station /> -->
		<my v-show="tabIndex==1"  v-if="loading==true" />

		<div class="nav shadow rounded-40 h-120">
			<div @click="tabIndex=0">
				<image src="/static/icon/nav-1.png" v-if="tabIndex==1" mode="widthFix" class="w-80"></image>
				<image src="/static/icon/nav-1-s.png" v-else mode="widthFix" class="w-80"></image>
			</div>
			<image src="/static/icon/scan.png" mode="widthFix" class="w-160" @click="scanCode"></image>
			<div @click="tabIndex=1">
				<image src="/static/icon/nav-2.png" v-if="tabIndex==0" mode="widthFix" class="w-70"></image>
				<image src="/static/icon/nav-2-s.png" v-else mode="widthFix" class="w-70"></image>
			</div>
		</div>




		<div style="height: 200rpx;"></div>

	</view>
</template>



<style>
	.nav {
		display: flex;
		align-items: flex-end;
		position: fixed;
		z-index: 9;
		bottom: 10px;
		left: 0;
		width: 700rpx;
		background-color: #fff;
		justify-content: space-between;
		padding: 0 65px;
		padding-bottom: 30rpx;
		left: 25rpx;
	}

	.index-1 {
		background: url("/static/bg/index-1.png") no-repeat center;
	}

	.index-2 {
		background: url("/static/bg/index-2.png") no-repeat center;
	}

	.index-3 {
		background: url("/static/bg/index-3.png") no-repeat center;
	}
	
	.index-4 {
		background: url("/static/bg/index-4.png") no-repeat center;
	}

	.text-area {
		font-size: 52rpx;
		color: #208BD9;
		font-weight: bold;
	}
	
	.container {
		height: 100px;
	  overflow: hidden; /* 隐藏超出部分 */
	  white-space: nowrap; /* 防止换行 */
	  position: relative; /* 定位容器 */
	}
	.marquee {
	  display: inline-block; /* 行内块元素 */
	  padding-right: 100%; /* 确保文本不会在一行内显示完就停止 */
	  animation: marquee 10s linear infinite; /* 动画效果 */
	}
	@keyframes marquee {
	  from { transform: translateY(20%); } /* 开始位置 */
	  to { transform: translateY(-100%); } /* 结束位置 */
	}
</style>